<template>
  <div class="_components_user-message-videoAndVoiceList">
    <div class="_components_user-message-videoAndVoiceList-div">
      <ul v-if="list1.length !== 0" :key="key" class="image-text-list img_text">
        <li v-for="(item, index) in list1" :key="index">
          <div class="img img1">
            <img :src="item.wxmpNewsRescouseParam[0].localThumbUrl" alt="">
            <div class="div2 overflow1">{{ item.wxmpNewsRescouseParam[0].title }}</div>
          </div>
          <div v-for="(it, i) in item.wxmpNewsRescouseParam.slice(1)" :key="i" class="text-and-img">
            <span :title="it.title" class="overflow1">{{ it.title }}</span>
            <div class="img img2">
              <img :src="it.localThumbUrl" alt="">
            </div>
          </div>
        </li>
      </ul>
      <div style="text-align: center;">
        <el-button style="margin: 0 auto" size="small" type="success" @click="openDialog">素材库选择</el-button>
      </div>
    </div>
    <el-dialog v-if="dialog" title="图文" :close-on-click-modal="false" :visible.sync="dialog" :modal="isdialog" :append-to-body="false">
      <el-form label-position="right" label-width="3rem" class="mb15">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input v-model="params.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- <UploadBtn @setUrl="addUrl" class="mr" /> -->
            <el-button type="primary" size="small" class="ml10" @click="getList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <ul class="waterfall img_text">
        <li v-for="(item, index) in list" :key="index" class="waterfall-item" style="position:relative;" :class="{'active': active === index}" @click="active = index">
          <div class="img img1">
            <img :src="item.wxmpNewsRescouseParam[0].localThumbUrl" alt="">
            <div class="div2 overflow1">{{ item.wxmpNewsRescouseParam[0].title }}</div>
          </div>
          <div v-for="(it, i) in item.wxmpNewsRescouseParam.slice(1)" :key="i" class="text-and-img">
            <span :title="it.title" class="overflow1">{{ it.title }}</span>
            <div class="img img2">
              <img :src="it.localThumbUrl" alt="">
            </div>
          </div>
          <div v-if="active === index" style="position:absolute;display:block;content:'';right:0;bottom:0;border:14px solid #07d;border-left-color:transparent;border-top-color:transparent;z-index:1;" />
          <i v-if="active === index" class="el-icon-check" style="position:absolute;bottom:0;right:0;color:#fff;z-index:2;" />
        </li>
      </ul>
      <vxe-pager
        :current-page.sync="params.pageNum"
        :page-size.sync="params.pageSize"
        :total="total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getList()"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import UploadBtn from '@/components/upload/uploadBtn'
import { imgTextList } from '@/api/wxMp'

export default {
  // components: {
  //   UploadBtn
  // },
  props: {
    isdialog: {
      type: Boolean,
      required: false,
      define: false
    },
    setinfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list1: [],
      list: [],
      active: -1,
      info: {
        name: ''
      },
      dialog: false,
      params: {
        mediaId: '',
        appId: '',
        name: '',
        pageNum: 1,
        pageSize: 20,
        type: 'news'
      },
      // addParams: {
      //   type: 'news',
      //   appId: '',
      //   url: '',
      //   subject: '',
      //   content: ''
      // },
      key: 1,
      total: 0
    }
  },
  mounted() {
    this.params.appId = this.setinfo.appId
    // this.addParams.appId = this.setinfo.appId
    if (this.setinfo.type === 'news') {
      this.list1 = [this.setinfo]
      this.key++
    }
  },
  methods: {
    // addUrl(url) {
    //   this.addParams.url = url
    //   addMaterial(this.addParams).then(res => {
    //     this.getList()
    //   })
    // },
    clickSure() {
      if (this.active !== -1) {
        this.list1 = [this.list[this.active]]
        this.key++
        this.$emit('getInfo', this.list[this.active])
        this.dialog = false
        setTimeout(() => {
        })
      }
    },
    getList() {
      this.active = -1
      imgTextList(this.params).then(res => {
        this.total = res.total
        this.list = res.records
        this.list.forEach((it, idx) => {
          if (res === it.id) {
            this.active = idx
          }
        })
        this.dialog = true
      })
    },
    openDialog() {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
._components_user-message-videoAndVoiceList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  >._components_user-message-videoAndVoiceList-div {
    width: 100%;
    border: 1px solid #eee;
    padding: 50px 0;
    .voice-img {
      width: 100px;
      height: 100px;
    }
  }
  .active {
    border: 1px solid #46a6ff !important;
  }
  .waterfall {
    width: 100%;
    column-gap:10px;
    column-count: 2;
    margin: 0 auto;
    .waterfall-item {
      padding: 10px;
      margin-bottom: 10px;
      break-inside: avoid;
      border: 1px solid #eaeaea;
      .btn {
        text-align: center;
      }
    }
  }
}
</style>
